<template>
  <view class="bg-bargain">
    <cu-custom :isBack="true" :bgColor="showBg ? 'bg-bargain1' : ''">
      <block slot="backText"></block>
      <block slot="content">邀请好友砍价</block>
    </cu-custom>
    <view class="bargain">
      <image class="bargain-bg" src="../../../static/images/bargainBack.png"></image>
      <view class="article no-card bargain-list flex justify-between flex-wrap">
        <view class="bargain-item margin-top-sm padding-bottom" v-for="(item, index) in bargainInfoList" :key="index">
          <view class="padding-xs padding-bottom-sm margin-top-sm align-center">
            <view class="tips">已送出 <text>2390</text> 件</view>
            <view class="imgBox">
              <image :src="item.picUrl" mode="heightFix" class="row-img"></image>
            </view>
            <view class=" bargain-information">
              <view class="name overflow-1 text-center margin-top-sm">{{
                item.name
              }}</view>
            </view>
            <view class="flex justify-center padding-top-xs">
              <navigator class="button shadow-blur btn-enter bg-bargain1" :url="
                '../bargain-detail/index?id=' +
                item.id +
                '&shopId=' +
                item.shopId
              " hover-class="none"><text class="margin-left-xs">前去砍价</text></navigator>
            </view>
          </view>
        </view>
      </view>
      <view :class="'cu-load ' + (loadmore ? 'loading' : 'over')"></view>
    </view>
  </view>
</template>

<script>
  const util = require("utils/util.js");
  const app = getApp();
  import api from "@/utils/api";
  import couponInfo from "components/coupon-info/index";

  export default {
    data() {
      return {
        showBg: false, //是否显示背景色
        CustomBar: this.CustomBar,
        theme: app.globalData.theme, //全局颜色变量
        page: {
          searchCount: false,
          current: 1,
          size: 10,
          ascs: "sort",
          //升序字段
          descs: "",
        },
        parameter: {},
        loadmore: true,
        bargainInfoList: [],
      };
    },

    components: {
      couponInfo,
    },
    props: {},

    //页面滑动 监听事件
    onPageScroll(e) {
      if (e.scrollTop > 20) {
        this.showBg = true;
      } else {
        this.showBg = false;
      }
    },
    onShow() { },

    onLoad: function (options) {
      if (options.shopId) {
        this.parameter.shopId = options.shopId;
      }
      app.initPage().then((res) => {
        this.bargainInfoPage();
      });
    },

    onReachBottom() {
      if (this.loadmore) {
        this.page.current = this.page.current + 1;
        this.bargainInfoPage();
      }
    },

    onPullDownRefresh() {
      // 显示顶部刷新图标
      uni.showNavigationBarLoading();
      this.refresh(); // 隐藏导航栏加载框

      uni.hideNavigationBarLoading(); // 停止下拉动作

      uni.stopPullDownRefresh();
    },

    methods: {
      bargainInfoPage() {
        api
          .bargainInfoPage(
            Object.assign({}, this.page, util.filterForm(this.parameter))
          )
          .then((res) => {
            let bargainInfoList = res.data.records;
            this.bargainInfoList = [...this.bargainInfoList, ...bargainInfoList];
            if (bargainInfoList.length < this.page.size) {
              this.loadmore = false;
            }
          });
      },
      refresh() {
        this.loadmore = true;
        this.bargainInfoList = [];
        this.page.current = 1;
        this.bargainInfoPage();
      },
    },
  };
</script>
<style>
  page{
    background: linear-gradient(180deg, #fea419 0%, #ff7825 100%);
    color: #ffffff;
  }
  .row-img {
    max-width: 260rpx;
    height: 230rpx;
    border-radius: 10rpx;
    margin: auto;
  }

  .imgBox {
    height: 230rpx;
    display: flex;
    margin-top: 70rpx;
  }

  .bargain {
    min-height: 1450rpx;
  }

  .bargain-list {
    margin-top: -50rpx;
    width: 720rpx;
    margin: auto;
  }

  .bargain-item {
    width: 350rpx;
    background-color: #ffffff;
    margin: auto;
    border-radius: 10rpx;
    margin-bottom: 40rpx;
    padding: 12rpx;
  }

  .bargain-item>view {
    width: 330rpx;
    margin: auto;
    border-radius: 10px;
    border: 1px solid #ff8921;
    position: relative;
  }

  .bargain-bg {
    width: 100%;
    height: 836rpx;
    margin-top: -160rpx;
  }

  .bargain-information {
    width: 460rpx;
  }

  .btn-enter {
    width: 580rpx;
    height: 76rpx;
  }
  .bg-bargain {
    background: linear-gradient(180deg, #fea419 0%, #ff7825 100%);
    color: #ffffff;
  }

  .bg-bargain1 {
    background: #fea51d;
    color: #ffffff;
  }
  .name{
    width: 330rpx;
    height: 36rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: #666666;
    line-height: 40rpx;
  }
  .button{
    width: 226rpx;
    height: 60rpx;
    background: linear-gradient(180deg, #FFB767 0%, #FF7825 100%);
    box-shadow: 2rpx 4rpx 0px 0px rgba(255,120,37,0.2);
    border-radius: 28rpx;
    text-align: center;
    line-height: 60rpx;
    font-size: 24rpx;
    color: #F9F9F9;
    margin-top: 20rpx;
  }
  .tips{
    width: 236rpx;
    height: 50rpx;
    background: #FFEDD1;
    border-radius: 0px 0px 10rpx 10rpx;
    font-size: 24rpx;
    color: #666666;
    text-align: center;
    line-height: 50rpx;
    font-weight: 600;
    position: absolute;
    top: 0;
    left: 47rpx;
    z-index: 9;
  }
  .tips text{
    color: #FEA51A ;
    margin: 0 2rpx;
  }
  .bargain-list::after{
    content: '';
    width: 350rpx;
    height: 0;
  }
</style>